<template>
  <div :class="!darkSkin ? 'waterFall' : 'waterFall dark'" ref="waterFall">
    <div :class="!darkSkin ? 'container' : 'container dark'" ref="container">
      <div class="item" v-for="item in items" :key="item.id">
        <div class="image">
          <img :src="item.coverImg" />
          <div class="cover">发表时间:{{ item.time }}</div>
        </div>
        <div class="title">{{ item.title }}</div>
        <div class="description">
          {{ item.description }}
        </div>
        <div class="about">
          <template v-if="item.auther">
            <div class="auther">
              <div class="auther_img">
                <img :src="item.auther.autherImg" />
              </div>
              <div class="auther_name">{{ item.autherName }}</div>
            </div>
            <div class="icon_detail">
              <div class="icon_item">
                <i class="iconfont icon-guankan"></i>
                <span>{{ item.seeing }}</span>
              </div>
              <div class="icon_item">
                <i class="iconfont icon-pinglun"></i>
                <span>{{ item.talking }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div :class="!darkSkin ? 'link' : 'link dark'">
              <span> <i class="iconfont icon-lianjie"></i> </span>
              <span style="margin-left: 15px"
                ><a :href="item.link">{{ item.link }}</a></span
              >
            </div>
          </template>
        </div>
      </div>
    </div>
    <div :class="!darkSkin ? 'tool' : 'tool dark'" ref="tool">
      <Pagination />
    </div>
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  name: "WaterFall",
  props: {
    items: Array,
  },
  components: {
    Pagination,
  },
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
  watch: {
    darkSkin: {
      handler: function (newVal, oldVal) {
        const container = Array.from(this.$refs.container.children);
        if (newVal) {
          container.forEach((item) => {
            item.classList.add("dark");
          });
        } else {
          container.forEach((item) => {
            item.classList.remove("dark");
          });
        }
      },
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
@media screen and (min-width: 1439.98px) {
  .container {
    width: 96vw;
    margin: 0 auto;
    padding: 30px 100px 30px 100px;
    columns: 3;
    column-gap: 3rem;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .container {
    width: 96vw;
    margin: 0 auto;
    padding: 30px 100px 30px 100px;
    columns: 3;
    column-gap: 2rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .container {
    width: 96vw;
    margin: 0 auto;
    padding: 30px 120px 30px 120px;
    columns: 2;
    column-gap: 3rem;
  }
}
@media screen and (max-width: 767.98px) {
  .container {
    width: 96vw;
    margin: 0 auto;
    padding: 30px 50px 30px 50px;
    columns: 1;
    column-gap: 0.6rem;
  }
}

.item {
  display: flex;
  margin-top: 4rem;
  margin-bottom: 3rem;
  padding: 10px 5px;
  height: 100%;
  overflow: auto;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px -1px rgb(7 10 25 / 5%),
    0 22px 27px -20px rgb(7 10 25 / 5%);
  transition: all 0.8s ease;
}
.item.dark {
  background-color: #353535;
}
.item:hover {
  transform: translateY(-15px);
  box-shadow: 0 3px 12px -1px rgb(7 10 25 / 5%),
    0 22px 27px -20px rgb(7 10 25 / 5%);
}
.item.dark:hover {
  box-shadow: 0 3px 12px -1px rgb(0, 208, 255),
    0 22px 27px -20px rgb(0, 208, 255);
}
.image {
  position: relative;
  width: 100%;
  height: 250px;
}

.image img {
  width: 100%;
  height: 250px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.cover {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  font-size: 0.8rem;
}
.title {
  margin: 10px 20px 5px 10px;
  width: 100%;
  padding: 10px 0 10px 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}
.description {
  margin: 20px;
  width: 100%;
  font-size: 1rem;
  text-indent: 2em;
}
.about {
  display: flex;
  width: 100%;
  height: 80px;
  padding: 0 20px 0 20px;
  border-top: 1px solid rgb(244, 244, 244);
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auther {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50%;
}
.auther_img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  box-shadow: 0 3px 12px -1px rgb(7 10 25 / 5%),
    0 22px 27px -20px rgb(7 10 25 / 5%);
}
.auther_img img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}
.auther_name {
  padding: 0 10px 0 10px;
  font-size: 0.9rem;
}
.icon_detail {
  display: flex;
  padding: 0 10px 0 10px;
  justify-content: space-between;
  width: 45%;
}
.icon_item {
  width: 35%;
  display: inline-block;
  font-size: 0.9rem;
}
.icon_item i {
  font-size: 1.2rem;
}
.icon_item span {
  font-size: 0.8rem;
  margin: 0 5px 0 5px;
}
.item h2 {
  padding: 8px 0;
}

.item P {
  color: #555;
}
.tool {
  display: flex;
  width: 100%;
  height: 120px;
  background-color: #eee;
  justify-content: center;
  align-items: center;
}
.tool.dark {
  background-color: #232125;
}
.link a:link {
  text-decoration: none;
  color: #77777e;
  font-size: 1rem;
}
.link a:visited {
  color: #77777e;
}
.link i {
  font-size: 1rem;
  color: #77777e;
}
.link span:nth-child(2) > a:hover {
  color: #ff3f34;
}
.link.dark {
  background-color: #353535;
}
.link.dark span:nth-child(2) > a:hover {
  color: #00d0ff;
}
</style>